<template>

	<view class="page">
		<view class="poster" v-if="!show_poster">
			<lPainter :board="posterObj" ref="painter" style="margin-left: 75rpx;"></lPainter>
			<view class="footer-btn">
				<!-- <view class="">
					返回
				</view> -->
				<view class="save" @click="toSave">
					保存
				</view>
				<view class="save generate" @click="generateNew">
					更新二维码
				</view>
				<view class="save generate" @click="changeCode">
					切换样式
				</view>
			</view>
			<view class="skmti">
				<!-- <view class="skmti_tit t23">商家收款码</view> -->
				<view class="skmti_zhu t1">商家收款码保存后，请打印好粘贴或放置在收银台上，以便用户扫码支付。</view>
			</view>
		</view>
		<view class="poster-btn">
			<view :class="{'is-check':check_idx==index}" v-for="(item,index) in footer_arr" :key="index"
				@click="toChoose(index)">
				<image :src="item" mode=""></image>
				<view v-if="check_idx==index"></view>
			</view>
		</view>
		<!-- 生成的图片 -->
		<uni-popup type="center" ref="posterImg" :maskClick="false"
			style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;">
			<view class="poster-img" style="position: relative;">
				<image src="../../static/img/clo.png" @click="closePopup"
					style="width: 6vw;height: 6vw;position: absolute;top: -6vw;right: -6vw;"></image>
				<!-- <text @click="closePopup"></text> -->
				<image :src="path" mode="" @click="previewImg"></image>
				<!-- #ifdef H5 -->
				<view class="">
					长按图片保存到手机
				</view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="">
					点击图片放大查看，并长按图片保存到手机
				</view>
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "../../components/uni-popup/uni-popup.vue";
	import lPainter from '../../components/lime-painter/index.vue'
	export default {
		components: {
			lPainter,
			uniPopup
		},
		data() {
			return {
				show_poster: false, //显示海报
				path: '', //生成的图片地址
				skbgIndex: 0, //收款码样式 0招财阿咪，1微信 2支付宝
				skbg: ['../../static/img/skbg0.jpg', '../../static/img/skbg1.jpg', '../../static/img/skbg2.jpg' , '../../static/img/skbg4.png'],
				css: [{
					left: '165rpx',
					top: '200rpx',
					width: '300rpx',
					height: '300rpx',
					background: 'none',
				}, {
					left: '120rpx',
					top: '278rpx',
					width: '366rpx',
					height: '366rpx',
					background: '#none'
				}, {
					left: '120rpx',
					top: '380rpx',
					width: '366rpx',
					height: '366rpx',
					background: '#none'
				},{
					left: '120rpx',
					top: '190rpx',
					width: '366rpx',
					height: '366rpx',
					background: '#none'
				}],
				posterObj: {
					width: '600rpx',
					height: '933rpx',
					background: '#fff',
					borderRadius: '15rpx',
					nickName: '',
					views: [
						// {
						// 	type: 'image',
						// 	src: '../../static/img/skbg1.png',
						// 	css: {
						// 		left: '0rpx',
						// 		top: '0rpx',
						// 		width: '600rpx',
						// 		height: '933rpx',
						// 		borderRadius: '0rpx',
						// 		background: 'none',
						// 	}
						// },
						// { //放二维图片接用
						// 	type: 'image',
						// 	src: '../../static/img/logo1.png',
						// 	css: {
						// 		left: '165rpx',
						// 		top: '200rpx',
						// 		width: '300rpx',
						// 		height: '300rpx',
						// 		background: '#none',
						// 		// background: '#f8f8f8',
						// 	}
						// },

						// { //放商家名称用
						// 	type: 'text',
						// 	text: '',
						// 	css: {
						// 		left: '235rpx',
						// 		top: '631rpx',
						// 		width: '200rpx',
						// 		height: '200rpx',
						// 		textAlign: 'center',
						// 		fontWeight:'blod',
						// 		// background: '#000', 
						// 	}
						// },
					]
				}, //画板数据
				footer_arr: [
					// '../../static/img/wx.png',
					// '../../static/img/zfb.png',
					// 'https://s.yun-live.com/images/20210201/5d2e237728e1dd8727835ca95084721e.png',
					// 'https://s.yun-live.com/images/20210201/15075d31c26cc446333d569b0d2346e8.png',
					// 'https://s.yun-live.com/images/20210201/8f4bbf78cab7a20079992c69e997e30b.png',
					// 'https://s.yun-live.com/images/20210201/6e716c556d1a80e90ecb0260e0990add.png'
				], //底部选项
				check_idx: 0, //底部选中的下标
			}
		},
		onLoad() {
			console.log('skm ...')
			var _this = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;
					// _this.mainid = "1435894543962693634";
					_this.nickName = res.data.nickName;
					// console.log(res.data.nickName);
					_this.ewm();
				}
			});
		},
		watch: {
			// check_idx(newVal,oldVal){
			// 	console.log(111,newVal);
			// 	console.log(222,oldVal);
			// }
		},
		methods: {
			previewImg() {
				// #ifdef H5
				return;
				// #endif
				uni.previewImage({
					current: this.path,
					urls: [this.path]
				});
			},
			closePopup() {
				this.$refs.posterImg.close();
				this.show_poster = false;
			},
			toSave() {
				uni.showLoading({
					title: '海报生成中',
				})
				const painter = this.$refs.painter;
				painter.canvasToTempFilePath().then(res => {
					this.path = res.tempFilePath;
					this.$refs.posterImg.open();
					this.show_poster = true;
					uni.hideLoading()
				});
			},
			generateNew() {
				console.log('生成二维码id：' + this.mainid)
				uni.showLoading({})
				var that = this
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mch/getAgainQRCode/' + that.mainid, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: that.mainid
					},
					success: (res) => {
						console.log('更新二维码：', res)
						uni.showToast({
							title: '更新成功'
						})
						
						//测试，待抽取公共方法
						if (res.data.status == '200') {
							// that.yqm = res.data.data.shareCode;
							that.src = res.data.data;
							setTimeout(function() {
								that.posterObj.background = '#fff';
								that.posterObj.views = [{
										type: 'image',
										src: that.skbg[that.type],
										css: {
											left: '0rpx',
											top: '0rpx',
											width: '600rpx',
											height: '933rpx',
											borderRadius: '0rpx',
											background: 'none',
										}
									},
									{ //放二维图片接用
										type: 'image',
										src: that.src,
										css: that.css[that.skbgIndex]
									},
									{ //放商家名称用
										type: 'text',
										// text: that.nickName,
										css: {
											left: '120rpx',
											top: '220rpx',
											width: '366rpx',
											height: '45rpx',
											color: '#fff',
											textAlign: 'center',
											fontWeight: 'blod',
											// background: '#000',
										}
									},
								]
								uni.hideLoading()
							}, 1000);
							setTimeout(function() {
								const painter = this.$refs.painter;
								painter.canvasToTempFilePath().then(res => {
									this.path = res.tempFilePath;
									this.$refs.posterImg.open();
									this.show_poster = true;
									// uni.hideLoading()
								});

							}, 1500)
						}

					},
					fail: (err) => {
						console.log('更新二维码err：', res)
					}


				})
			},
			changeCode() {
				this.skbgIndex++
				if (this.skbgIndex > 3) {
					this.skbgIndex = 0
				}
				this.ewm()
			},
			getImg(r) {

			},
			ewm() {
				uni.showLoading({})
				var that = this;
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					url: getApp().globalData.url + 'mch/getPayQRCode/' + that.mainid, //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						id: that.mainid
					},
					success: (res) => {
						//关闭加载动画
						console.log('原来的图片：', res);
						if (res.data.status == '200') {
							// that.yqm = res.data.data.shareCode;

							that.src = res.data.data;
							setTimeout(function() {
								that.posterObj.background = '#fff';
								that.posterObj.views = [{
										type: 'image',
										src: that.skbg[that.skbgIndex],
										css: {
											left: '0rpx',
											top: '0rpx',
											width: '600rpx',
											height: '933rpx',
											borderRadius: '0rpx',
											background: 'none',
										}
									},
									{ //放二维图片接用
										type: 'image',
										src: that.src,
										css: that.css[that.skbgIndex]
									},
									{ //放商家名称用
										type: 'text',
										// text: that.nickName,
										css: {
											left: '120rpx',
											top: '220rpx',
											width: '366rpx',
											height: '45rpx',
											color: '#fff',
											textAlign: 'center',
											fontWeight: 'blod',
											// background: '#000',
										}
									},
								]
								uni.hideLoading();
							}, 1000);
							setTimeout(function() {
								const painter = this.$refs.painter;
								painter.canvasToTempFilePath().then(res => {
									this.path = res.tempFilePath;
									this.$refs.posterImg.open();
									this.show_poster = true;
									// uni.hideLoading()
								});
							}, 1500)
						}
					},
					fail: (error) => {
						// this.checks = true
						console.log(error)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'style.scss';
</style>
